<template>
  <div
    :class="[
      'GfTitle',
      componentData.attributes.titleAlign === 'left'
        ? 'align-left'
        : 'align-center'
    ]"
  >
    <div
      class="title"
      :style="{
        fontSize: addUnit(componentData.styles.titleFontSize),
        color: componentData.styles.titleColor
      }"
    >
      {{ componentData.attributes.title }}
    </div>
    <div
      class="sub-title"
      :style="{
        fontSize: addUnit(componentData.styles.subTitleFontSize),
        color: componentData.styles.subTitleColor
      }"
    >
      {{ componentData.attributes.subTitle }}
    </div>
  </div>
</template>

<script lang="ts">
import { defineComponent } from 'vue'
import { addUnit } from '@/utils'

export default defineComponent({
  name: 'GfTitle',
  props: ['componentData'],
  setup() {
    return {
      addUnit
    }
  }
})
</script>

<style lang="scss" scoped>
.GfTitle {
  line-height: 1;
  &.align-left {
    display: flex;
    align-items: flex-end;
    .sub-title {
      margin-left: 5px;
    }
  }
  &.align-center {
    display: flex;
    flex-direction: column;
    align-items: center;
    .sub-title {
      margin-top: 5px;
    }
  }
  .title {
    font-size: 20px;
    color: rgba(51, 51, 51, 1);
  }
  .sub-title {
    font-size: 12px;
    color: rgba(153, 153, 153, 1);
  }
}
</style>
